.<template>
  <div class="departmentMain">
      <div class="add_department_background">
        <div class="add_department">
          
        </div>
      </div>

      <div class="modify_department_background">
        
        <div class="modify_department">
          
        </div>
      </div>

      <div class="department_search">
        
      </div>
      
      <div class="department_table">

      </div>
      <div class="page_nav_department">

      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.departmentMain{
    width:100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    border-radius: 15px;
    box-shadow: gray 5px 5px 10px;
}
.department_search{
  width: 100%;
  height: 15%;
  background-color: rgb(255, 255, 255);
  border-radius: 15px 15px 0px 0px;
}
.add_department{
  padding: 5%;
  z-index: 10;
  position: absolute;
  width: 300px;
  height: 200px;
  background-color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px 15px 15px 15px;
}
.add_department_background{
  z-index: 9;
  position: absolute;
  width: 3000px;
  height: 3000px;
  background-color: rgba(0, 0, 0, 0.5);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.modify_department{
  padding: 5%;
  z-index: 10;
  position: absolute;
  width: 300px;
  height: 200px;
  background-color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px 15px 15px 15px;
}
.modify_department_background{
  z-index: 9;
  position: absolute;
  width: 3000px;
  height: 3000px;
  background-color: rgba(0, 0, 0, 0.5);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
</style>